<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Basic Example</title>
  </head>
  <body>
    <h1>Basic Example</h1>
    <div id="container"></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
    <script src="/vue-styled-components.js"></script>
    <script type="text/babel">

    // Create a global style
    styled.injectGlobal`
      body {
        background-color: #fefefe;
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      }

      *, *::before, *::after {
        box-sizing: border-box;
      }
    `;

    const animation = styled.keyframes`
        from {
          transform: rotate(0deg);
        }

        to {
          transform: rotate(360deg);
        }
      `;

    // Create a <CustomTitle> vue component that renders an <h1> which is
    // centered, palevioletred and sized at 1.5em
    const CustomTitle = styled.default('h1', { animate: Boolean })`
      font-size: 2em;
      text-align: center;
      color: ${props => props.theme.primary};
      text-transform: uppercase;

      @supports (-webkit-text-stroke: 1px) {
        -webkit-text-stroke: 2px ${props => props.theme.primary};
        color: transparent
      }

      ${props => props.animate &&
        `animation: ${animation} 2s linear infinite;`
      }
    `;

    const H2 = CustomTitle.withComponent('h2')

    const MyComponent = {
      props: ['visible'],
      template: `<h1><slot /></h1>`
    }

    const SuperCustomTitle = styled.default(MyComponent, { color: String })`
      color: ${props => props.color || 'red'};
      opacity: ${props => props.visible ? 1 : 0};
    `

    // Create a <Wrapper> vue component that renders a <section> with
    // some padding and a papayawhip background
    const Wrapper = styled.default.section`
      padding: 4em;
      background: ${props => props.theme.secondary};
    `;

    const W2 = Wrapper.extend`
      background: ${props => props.theme.tertiary};
    `;

    // Custom Wrapper
    const W3 = styled.default(Wrapper, {
      color: String,
      bg: String
    })`
      color: ${props => props.color};
      background-color: ${props => props.bg};
    `


    const StyledInput = styled.default.input`
      display: block;
      width: 100%;
      height: 60px;
      border: solid 3px transparent;
      padding: 0 0.6em;
      font-size: 1em;
      line-height: 1;

      &:focus {
        outline: none;
        border: solid 3px ${props => props.theme.primary};
      }
    `

    const ReadonlyStyledInput = styled.default(StyledInput).attrs({ readOnly: true })`
      color: ${props => props.theme.disabled};
      border-color: ${props => props.theme.disabled};
      font-family: ${props => props.noop};

      &:focus {
        border-color: ${props => props.theme.disabled};
      }
    `

    const Btn = styled.default('button', { visible: Boolean })`
      outline: none;
      border: none;
      border-radius: 6em;
      padding: 1em 2em;
      color: #fff;
      cursor: pointer;
      margin: 1.5em 0;
      background-color: ${props => props.theme.primary};
      opacity: ${props => props.visible ? 1: 0};

      &:focus {
        outline: none;
        border: solid 3px ${props => props.theme.primary};
      }
    `

    const SuperBtn = styled.default(Btn, { visible: Boolean, big: Boolean })`
      font-size: ${props => props.big ? 0.8 : 1}em;
    `

    const CustomBtn = styled.default(Btn, {
      color: String,
      bg: String
    })`
      color: ${props => props.color};
      background-color: ${props => props.bg};

      &:focus {
        outline: none;
        border: solid 3px ${props => props.color};
      }
    `

    new Vue({
      el: '#container',
      data: {
        text1: 'Hello World, this is my first styled component!',
        text2: 'Hello World, this is my first styled component, I am readonly using .attrs function!',
        animated1: false,
        animated2: false,
        element: 'div',
        setElement: 'div'
      },
      template: `
      <theme-provider :theme="{
        primary: 'palevioletred',
        secondary: 'papayawhip',
        tertiary: 'lavenderblush',
        disabled: 'gainsboro'
      }">
        <wrapper>
          <custom-title :visible="true" :animate="animated1"> {{text1}} </custom-title>
          <styled-input v-model="text1" />
          <btn visible @click="animated1 = !animated1"> A Styled Button </btn>
        </wrapper>
        <w-2>
          <h-2 :animate="animated2"> {{text2}} </h-2>
          <readonly-styled-input v-model="text2" />
          <super-btn visible @click="animated2 = !animated2"> An extension of Styled Button </super-btn>
        </w-2>
        <w-3
          bg="#c6f7e6"
        >
        <custom-title :visible="true">Change Rendered Elements with "as" prop.</custom-title>
          <h3>Enter any HTML element and see the element rendered by the styled component change 👇🏽</h3>
          <styled-input @keydown.enter="updateElement" placeholder="Enter an HTML element! Like 'button' or 'section'" v-model="element" />
          <custom-btn
            visible
            :as="setElement"
            role="button"
            tabindex="0"
            color="#42a786"
            bg="papayawhip"
            aria-label="Btn rendered as div"
            @keydown.space="updateElement"
          >
            I am the "btn" component rendered as a "{{ setElement }}" using the \`as\` prop! 🎉
          </custom-btn>
        </w-3>
      </theme-provider>`,
      components: {
        CustomTitle,
        Wrapper,
        W2,
        W3,
        H2,
        Btn,
        SuperBtn,
        CustomBtn,
        SuperCustomTitle,
        StyledInput,
        ReadonlyStyledInput,
        ThemeProvider: styled.ThemeProvider,
      },
      methods: {
        updateElement() {
          this.setElement = this.element
        }
      }
    });
    </script>
  </body>
</html>
